<script setup lang="ts">
  import { ref, watch, provide } from 'vue';
  import { Modal } from '@arco-design/web-vue';
  import UserConnect from './UserConnect.vue';
  import { UserConnectModal } from './context';

  const visibleRef = ref(false);
  const props = defineProps({
    visible: {
      type: Boolean,
      default: false,
    },
  });
  const emit = defineEmits(['update:visible']);

  watch(
    () => props.visible,
    (visible) => {
      visibleRef.value = visible;
    },
  );

  function changeVisible(visible: boolean) {
    visibleRef.value = visible;
    emit('update:visible', visible);
  }

  provide(UserConnectModal, {
    actions: {
      changeVisible,
    },
  });
</script>

<template>
  <Modal
    :visible="visibleRef"
    @update:visible="changeVisible"
    width="auto"
    simple
    :footer="false"
    modalClass="p-0 bg-transparent"
    bodyClass="mt-[-24px]"
  >
    <div class="my-[50px] bg-white">
      <UserConnect />
    </div>
  </Modal>
</template>
